<template>
  <div class="bread-container">
    <menu-unfold-outlined v-if="collapsed" class="trigger" @click="toggleCollapsed"></menu-unfold-outlined>
    <menu-fold-outlined v-else class="trigger" @click="toggleCollapsed" />
    <a-breadcrumb class="breadcrumb" v-if="showBread">
      <a-breadcrumb-item v-for="item in routeList">
        <router-link :to="item.path">
          {{ item.meta.title }}
        </router-link>
      </a-breadcrumb-item>
    </a-breadcrumb>
  </div>
</template>
<script lang='ts' setup name="Breadcrumb">
import { computed, ref, watch } from 'vue';
import { useRoute } from 'vue-router';
import { MenuUnfoldOutlined, MenuFoldOutlined } from "@ant-design/icons-vue";

const props = defineProps<{
  collapsed: Boolean;
}>();
const emit = defineEmits<{
  (e: "toggleCollapsed"): void;
}>();
let collapsed = ref(props.collapsed);
let showBread = ref<boolean>(true);
const $route = useRoute();

let routeList = computed(() => {
  if ($route.path.includes('home')) {
    return [$route.matched[1]];
  }
  if ($route.path.includes('chat')) {
    return [{
      path: "/home",
      meta: {
        title: "首页"
      }
    }, $route.matched[1]];
  }
  return [{
    path: "/home",
    meta: {
      title: "首页"
    }
  }, ...$route.matched];
})
// watch
watch(() => props.collapsed, (newValue, oldValue) => {
  collapsed.value = newValue;
})

const toggleCollapsed = () => {
  emit("toggleCollapsed");
};

</script>
<style lang='less' rel='stylesheet/less' scoped>
.bread-container {
  .breadcrumb {
    display: inline-block;
    line-height: @headerHeight !important;
  }

  .trigger {
    font-size: 18px;
    line-height: @headerHeight;
    padding: 0 24px;
    cursor: pointer;
    transition: color 0.3s;

    :hover {
      color: #1890ff;

    }
  }
}
</style>